<template>
	<div class="order">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>美食管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--	搜索框	-->
		<div class="content">
			<div class="order-search">
				<el-form ref="form" :inline="true" :model="searchform" label-width="80px" size="medium">
					<el-form-item label="用户名称">
						<el-input v-model="searchform.order_owner_name"></el-input>
					</el-form-item>
					<el-form-item label="订单号">
						<el-input v-model="searchform.order_id"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="order-buttons">
				<!--批量删除 -->
				<div class="del-button-div">
					<el-button type="danger" size="medium" :disabled="delButton" @click="delselect"><i class="el-icon-delete"></i>
						批量删除</el-button>
				</div>
				<div class="order-state">
					<el-select v-model="searchform.status" @change="stateChange" placeholder="请选择">
						<el-option v-for="item in options" :key="item.constant_term_id" :label="item.constant_term_meaning" :value="item.constant_term_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="order-table">
				<el-table :data="tableData" style="width: 100%" @selection-change="searchChange">
					<el-table-column type="selection" width="55px" align="center">
					</el-table-column>
					<el-table-column prop="order_id" label="订单号" sortable>
					</el-table-column>
					<el-table-column prop="order_owner_name" label="用户名">
					</el-table-column>
					<el-table-column prop="carrier" label="送餐员">
					</el-table-column>
					<el-table-column prop="order_original_price" label="原价" sortable>
					</el-table-column>
					<el-table-column prop="order_true_price" label="实际价格" sortable>
					</el-table-column>
					<el-table-column prop="userAddress.receiver_address" label="收获地址" width="280px">
					</el-table-column>
					<el-table-column prop="payStyle.constant_term_meaning" label="支付方式">
					</el-table-column>
					<el-table-column prop="orderState.constant_term_meaning" label="订单状态" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130" align="center">
						<template slot-scope="scope">
							<el-button @click="lookClick(scope.row)" type="text"><i class="el-icon-search"></i> 查看</el-button>
							<el-button @click="delClick(scope.row)" type="text"><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="order-page">
				<div class="block">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
					 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import OrderService from './OrderService.js';
	export default {
		name: "Food",
		data() {
			return {
				searchform: {
					order_owner_name: null,
					order_id: null,
					status: '',
				},
				addform: {

				},
				//订单状态查询
				options: [{
					constant_term_id: '',
					constant_term_kind: '',
					constant_term_meaning: "全部",
				}],

				tableData: [],
				pageNum: 1,
				pageSize: 5,
				total: 50,
				adddialogVisible: false,
				editdialogVisible: false,

				delButton: true,
				selectRow: [],
			}
		},
		created() {
			this.searchByConstant(2);
			this.getPage(this.pageNum, this.pageSize);
		},
		methods: {
			//提交搜索表单
			searchSubmit() {
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			//状态改变
			stateChange(){
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			//批量删除
			delselect() {
				let list = this.selectRow.map(item => {
					return item.order_id;
				});
				this.$confirm('确定删除所有选中的订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					OrderService.deleteByGroupService({
						list: list
					}, res => {
						if (res.deletByGroupResult) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						} else {
							this.$message({
								type: 'error',
								message: '删除失败!'
							});
						}
						this.getPage(this.pageNum, this.pageSize);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//查看
			lookClick(row) {
				this.$router.push({
					name: 'OrderDetail',
					params: {
						order_id: row.order_id
					}
				})
			},
			//单删
			delClick(row) {
				console.log(row);
				this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					OrderService.deleteByIdService({
						order_id: row.order_id
					}, res => {
						if (res.deleteResult) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						} else {
							this.$message({
								type: 'error',
								message: '删除失败!'
							});
						}
						this.getPage(this.pageNum, this.pageSize);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//每页大小改变
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			//当前页码改变
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			getPage(pageNum, pageSize) {
				OrderService.getOrderByOrderInfoService(this.searchform, {
					pageNum: pageNum,
					pageSize: pageSize
				}, res => {
					// console.log(res);
					this.tableData = res.searchResult.list;
					this.total = res.searchResult.total;
				})
			},
			//表格选择改变回调
			searchChange(select) {
				this.selectRow = select;
				this.delButton = select.length == 0;
			},
			//查询常数项表，订单状态
			searchByConstant(kindId) {
				OrderService.searchByConstantService({
					constant_term_kind: kindId,
				}, res => {
					console.log(res);
					// this.options = [...this.options,...res.searchByConstantTermList];
					this.options.push.apply(this.options,res.searchByConstantTermList);
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import '../../style/Common.less';

	.order {}

	.order-search {
		color: #606266;
		font-weight: bold;
	}

	.order-buttons {
		display: flex;

		.del-button-div,
		.order-state {
			margin: 0 12px 20px 12px;
		}

		.order-state {
			margin-left: auto;
		}
	}

	.order-table {}

	.order-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.order-add-dialog {
		.order-add {
			padding: 0 20px;
		}
	}
</style>
